// 采购金额
import { useRef, useEffect } from "react"
import * as echarts from "echarts"

const getOption = (data) => {
  return {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: data.series.map((item) => item.name)
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.labels
    },
    yAxis: {
      type: "value",
      name: ""
    },
    series: data.series
  }
}

const PurchaseAmount = ({
  materialTrendAnalysis = {},
  materialProcurementBenchmark = {}
}) => {
  const chartRef1 = useRef(null)
  const myChart1 = useRef(null)
  useEffect(() => {
    if (chartRef1.current) {
      if (!myChart1.current) {
        myChart1.current = echarts.init(chartRef1.current)
      }
      myChart1.current.setOption(getOption(materialTrendAnalysis))
    }
  }, [materialTrendAnalysis])

  const chartRef2 = useRef(null)
  const myChart2 = useRef(null)
  useEffect(() => {
    if (chartRef2.current) {
      if (!myChart2.current) {
        myChart2.current = echarts.init(chartRef2.current)
      }
      myChart2.current.setOption(getOption(materialProcurementBenchmark))
    }
  }, [materialProcurementBenchmark])

  return (
    <div className="h-[678px] text-[14px] mt-[15px] border-1 border-white rounded-[8px] p-[12px]">
      {/* 标题 */}
      <div
        className="w-[365px] h-[36px] leading-[36px]"
        style={{
          backgroundImage: `url('assistant-decision/base-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        <span className="ml-[30px] text-white text-[16px] font-[600]">
          采购金额
        </span>
      </div>
      {/* 采购金额 */}
      <div className="w-full mt-[22px]">
        <div className="flex items-center mt-[12px]">
          <div
            className="w-[169px] h-[32px] text-white text-center leading-[32px]"
            style={{
              backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "50%"
            }}
          >
            <span>采购金额</span>
          </div>
        </div>
        <div ref={chartRef1} className="w-full h-[240px] mt-4 ml-[20px]"></div>
      </div>
      {/* 物资专业领域采购管理同业对标 */}
      <div className="w-full mt-[42px]">
        <div className="flex items-center mt-[12px]">
          <div
            className="w-[250px] h-[32px] text-white text-center leading-[32px]"
            style={{
              backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "50%"
            }}
          >
            <span>物资专业领域采购管理同业对标</span>
          </div>
        </div>
        <div ref={chartRef2} className="w-full h-[240px] mt-4 ml-[20px]"></div>
      </div>
    </div>
  )
}

export default PurchaseAmount
